<script setup lang="ts">

import { ref } from 'vue';
import HmButton from './components/HmButton.vue'
// 1.父组件提供数据
const car = ref('黄包车')
const money = ref(100)
// 如果父传子和子传父，显示父传子的
const house = ref('北京四合院')

const changeMoney = (count:number) => {
  money.value += count
}

</script>

<template>
  <div class="app-page">
    父组件
    <!-- 使用子组件 -->
    <!-- 3.父组件传递给子组件信息 -->
    <!-- 接收子组件传来自定义事件，$event是默认用来接收子组件传入的默认值 -->
    <HmButton :car="car" :money = "money"
    :house="house"
    @change-money="changeMoney"
    @change-car="car = $event"/>
  </div>
</template>

<style lang="css" scoped>
.app-page{
width: 600px;
height: 400px;
background-color: pink;
}
</style>
